<!-- 选择教练 -->
<script setup>
	import {
		ref,
		reactive
	} from 'vue'

	import {
		useLongLatStore
	} from '@/stores/index'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	import {
		qryShopApi
	} from '@/api/venue.js'


	// 经纬度
	const longLatStore = useLongLatStore()
	// props
	const props = defineProps({
		show: {
			type: Boolean,
			required: true
		},
		selectVenueRow: {
			type: Object,
			default: () => {}
		}
	})
	// emits
	const emit = defineEmits(['close', 'confirm'])

	// 数据
	const data = reactive({
		list: [],
		value: '',
		shopName: undefined,
		distanceType: '',
		currentCity: {},
		pageNo: 1,
		pageSize: 10,
		totalPages: 10, // 总页数
		status: 'loadmore',
		typeCode: '',
	})

	// 关闭弹窗
	const close = () => {
		reset()
		emit('close')
	}
	// 还原初始数据
	const reset = () => {
		data.value = ''
	}


	// 距离类型
	const distanceTypeList = [{
			label: '城区',
			value: 0
		},
		{
			label: '距离',
			value: 1
		}
	]

	let dropdownIsOpen = ref(false)
	const dropdownChange = bool => {
		dropdownIsOpen.value = bool
	}


	// 切换区域
	const regionChange = (item) => {
		data.regionType = item.code
		data.distance = ''
		resetList()
	}

	const distanceChange = (item) => {
		data.distance = item.value
		data.regionType = ''
		resetList()
	}

	// 重置列表
	const resetList = () => {
		uDropdownRef.value.close()
		data.pageNo = 1
		data.list = []
		getList()
	}


	const lower = (e) => {
		console.log("已经滚动到底部了")
		if (data.status !== 'loadmore') return
		qryShopList()
	}

	onLoad(() => {
		qryShopList()
	})
	// 获取场馆列表
	const qryShopList = () => {
		qryShopApi({
			pageSize: data.pageSize,
			pageNum: data.pageNo,
			latitude: longLatStore.info.latitude,
			longitude: longLatStore.info.longitude,
			cityCode: data.currentCity.code,
			qryType: 2,
			bizType: data.typeCode,
			shopName: data.shopName
		}).then(res => {
			const list = res.data
			const total = res.total
			// console.log('list', JSON.stringify(list.slice(0, 2)))
			// const { list, total } = res.data
			data.totalPages = Math.ceil(total / data.pageSize)
			data.pageNo === 1 ? data.list = list : data.list = [...data.list, ...list]
			data.pageNo++;
			data.status = data.pageNo >= data.totalPages ? 'nomore' : 'loadmore'
		})
	}


	// 搜索场馆
	const venueChange = (value) => {
		console.log('value: ', value);
		data.pageNo = 1
		qryShopList()
	}

	const value1 = ref(1)
	const value2 = ref(2)
	const options1 = ref([{
			label: '默认排序',
			value: 1,
		},
		{
			label: '距离优先',
			value: 2,
		},
		{
			label: '价格优先',
			value: 3,
		}
	])
	const options2 = ref([{
			label: '去冰',
			value: 1,
		},
		{
			label: '加冰',
			value: 2,
		}
	])


	// 选择场馆
	const selectVenue = ref()
	const groupChange = (item) => {
		// console.log('itemceshi');
		console.log('item: ', item);
		selectVenue.value = item
	}

	// 确认选择
	const sure = () => {
		emit('confirm', selectVenue.value)
	}
</script>
<script>
	export default {
		options: {
			styleIsolation: "shared"
		},
	};
</script>
<template>
	<!-- 弹窗-选择教练 -->
	<up-popup :show="props.show" :closeable="true" @close="close" :round="10" bgColor="#FFFFFF">
		<view class="Coupon-module">
			<view class="title">
				<text>选择场馆</text>
			</view>
			<!-- <up-dropdown ref="uDropdownRef" title-size="24rpx" height="88rpx" active-color="#008043"
					inactive-color="#303133" menu-icon="arrow-down-fill" border-radius="24rpx"
					@open="dropdownChange(true)" @close="dropdownChange(false)">
					<up-dropdown-item title="附近">
						<view class="nearby-box">
							<view class="types-box">
								<view v-for="item in distanceTypeList" :key="item.value" class="item"
									:class="item.value == data.distanceType ? 'active' : ''"
									@click="data.distanceType = item.value">{{
				  item.label }}</view>
							</view>
							<view class="types-content">
								<view v-if="data.distanceType == 0" class="region-box">
									<view v-for="item in data.regionList" class="item" :key="item.code"
										:class="item.code == data.regionType ? 'active' : ''"
										@click="regionChange(item)">{{ item.name}}</view>
								</view>
								<view v-else class="distance-box">
									<view v-for="item in distanceList" :key="item.value" class="item"
										:class="data.distance == item.value ? '  active' : ''"
										@click="distanceChange(item)">
										<text class="label">{{ item.label }}</text>
										<up-icon v-if="data.distance == item.value" name="checkbox-mark"></up-icon>
									</view>
								</view>
							</view>
						</view>
					</up-dropdown-item>
				</up-dropdown> -->

			<view class="cnt">
				<scroll-view scroll-y="true" style="height: 920rpx;" @scrolltolower="lower">
					<view class="list">
						<up-search placeholder="请输入场馆关键词" v-model="data.shopName" :showAction="false"
							@change="venueChange"></up-search>
						<view class="" style="margin-top: 20rpx !important;">
							<up-radio-group v-model="data.value" iconPlacement="right" placement="column"
								inactiveColor="#D9D9D9" activeColor="#25D62E" @change="groupChange">
								<view v-for="item in data.list" :key="item.shopId" class="item"
									:class="data.value == item ? 'active' : ''">
									<view class="content-box">
										<view class="left" style="">
											<image style="width: 152rpx;height: 152rpx;" :src="item.shopMainPic"
												mode="scaleToFill" />
										</view>
										<view class="info">
											<view class="name"
												style="display: flex;justify-content: space-between; margin-left: 4rpx;">
												<text class="name_left">{{item.shopName}}</text>
												<view class="right">
													<image src="/static/images/coach/icon_address.png" mode="widthFix"
														style="width: 16rpx; height: 21rpx;" />
													<text style="#333333">{{item.distanceLabel}}</text>
												</view>
											</view>
											<view class="center">
												<view class="rate">
													<!-- <u-icon name="star-fill" color="#FFB13B;"></u-icon> -->
													<up-rate v-model="item.shopScore" size="12" :allowHalf="true"
														inactiveIcon="star-fill" inactiveColor="#D9D9D9"
														activeColor="#FFB13B" readonly></up-rate>
													<text>{{item.shopScore || '暂无评价' }}</text>
												</view>
												<view class="tags">
													<text class="card" v-for=" (it,idx) in  item.tshopTagLabelList"
														:key="idx">{{it}}</text>
													<!-- 	<text class="card">减脂</text>
												<text class="card">拉伸</text>
												<text class="card">肩颈康复</text> -->
												</view>
												<view style="font-size: 24rpx;margin-left: 4rpx;color: #999999;">
													{{item.addrDesc}}
												</view>
											</view>

										</view>
										<view class="radio-box">
											<up-radio :label="''" :name="item">
											</up-radio>
										</view>
									</view>
								</view>
							</up-radio-group>

						</view>
					</view>
				</scroll-view>
			</view>
			<!-- 底部栏 -->
			<view class="bottom-bar">
				<view class="content">
					<up-button class="sure-btn" text="确认" type="primary" shape="circle" @click="sure"></up-button>

				</view>
			</view>
		</view>
	</up-popup>
</template>

<style lang="scss" scoped>
	.Coupon-module {
		padding-bottom: 128rpx;

		// background-color: #F6F6F6;


		// 搜索框
		& .search-box {
			box-sizing: border-box;
			display: flex;
			align-items: center;
			padding: 0rpx 30rpx;
			margin: 12rpx 0;
			margin-left: 32rpx;
			width: 492rpx;
			color: #838385;
			background: #F6F6F6;
			border-radius: 200rpx 200rpx 200rpx 200rpx;

			& .u-icon {
				font-size: 32rpx;
			}

			& text {
				margin-left: 16rpx;
				width: 288rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				line-height: 28rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}


		// 标题
		& .title {
			margin-top: 30rpx;
			font-weight: 500;
			font-size: 32rpx;

			color: #303133;
			text-align: center;
		}

		// 内容
		& .cnt {
			box-sizing: border-box;
			// padding: 38rpx 44rpx;
			// margin-top: 32rpx;

			& .list {
				box-sizing: border-box;
				padding: 38rpx 44rpx;

				.u-search {}

				& .item {
					margin-bottom: 20rpx;

					&.active {
						background: linear-gradient(180deg, #26BC2E, #2B7330);
						border-radius: 20rpx;
						padding: 4rpx;

						&>.content-box {
							border: none;
							background: linear-gradient(180deg, #E9F9EA 0%, #FFFFFF 100%);


						}
					}

					&>.content-box {
						position: relative;
						display: flex;
						align-items: center;
						padding: 16rpx;
						background: #FFFFFF;
						border-radius: 12rpx;
						width: 662rpx;
						border-radius: 16rpx;
						border: 2rpx solid #D9D9D9;

						.left {

							width: 152rpx;
							height: 152rpx;
							border-radius: 50%;
							overflow: hidden;
						}

						& .info {
							width: 430rpx;
							margin-left: 16rpx;
							// display: flex;

							& .name {
								font-weight: 500;
								font-size: 28rpx;
								color: #303133;
							}

							& .center {
								// display: flex;
								// align-items: center;
								margin-top: 4rpx;

								& .rate {
									display: flex;
									align-items: center;

									& text {
										margin-left: 8rpx;
										font-family: PingFang SC, PingFang SC;
										font-weight: 500;
										font-size: 28rpx;
										color: #303133;
										line-height: 33rpx;
										text-align: left;
										font-style: normal;
										text-transform: none;
									}
								}

								& .tags {
									display: flex;
									align-items: center;
									margin: 8rpx 0;

									& .card {
										padding: 4rpx 12rpx;
										// margin-left: 12rpx;
										font-family: PingFang SC, PingFang SC;
										font-weight: 400;
										font-size: 18rpx;
										color: #838385;
										line-height: 21rpx;
										text-align: left;
										font-style: normal;
										text-transform: none;
										background: #F5F7F6;
										border-radius: 4rpx 4rpx 4rpx 4rpx;
									}
								}
							}

							& .other-box {
								display: flex;
								align-items: flex-end;
								margin-top: 20rpx;

								& .describe {
									display: flex;
									font-weight: 400;
									font-size: 20rpx;
									color: #808080;
									width: 298rpx;
								}

								& .price-box {
									display: flex;
									align-items: flex-end;
									justify-content: flex-end;
									margin-left: 36rpx;

									& .price {
										font-family: PingFang SC, PingFang SC;
										font-weight: 500;
										font-size: 36rpx;
										line-height: 36rpx;
										background: linear-gradient(180deg, #303133 0%, #21FF2B 100%);
										background-clip: text;
										-webkit-background-clip: text;
										-webkit-text-fill-color: transparent;
									}

									& .unit {
										margin-left: 2rpx;
										font-family: PingFang SC, PingFang SC;
										font-weight: 500;
										font-size: 20rpx;
										color: #838385;
										line-height: 23rpx;
									}
								}
							}
						}

						& .radio-box {
							width: 36rpx;
							height: 36rpx;
							position: absolute;
							right: -10rpx;
							top: -10rpx;

							&::v-deep .u-radio {
								margin: 0;
							}
						}
					}
				}
			}
		}

		// 底部栏
		& .bottom-bar {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100vw;
			height: 172rpx;
			background: #FFFFFF;
			border-top: 1rpx solid #E9E9EB;

			&::v-deep .content {
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 12rpx 40rpx;

				& .u-button {
					height: 88rpx;
					width: 620rpx;
					font-weight: 500;
					font-size: 32rpx;
					border-radius: 112rpx;
					font-weight: 500;
					font-size: 32rpx;
					color: #FFFFFF;
					background: #303133;
				}
			}
		}

		// 赠送弹窗文字
		& .sure-give-modal {
			margin-top: 20rpx;

			& view {
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				line-height: 40rpx;
				text-align: center;
			}
		}
	}
</style>